<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

  <style>

    * {

      margin: 0;

      padding: 0;

    }

 

    html,

    body {

      height: 100%;

      overflow: hidden;

    }

 

    button {

      padding: 5px 10px;

      cursor: pointer;

    }

  </style>

</head>

 

<body>

<!---->

<button value="red">红</button>

<button value="green">绿</button>

<button value="blue">蓝</button>

 

<script>

   var body = document.querySelector('body'),
   buttons = document.querySelectorAll('button'),
   arr = ['red', 'green', 'blue']
   for (let i = 0; i < buttons.length; i++) {
    //let j =i
    buttons[i].onclick = function () {
      console.log(i);
      body.style.background = arr[i]
    }
  }
  console.log(i);
</script>

</body>

 

</html>